<template>
	<view>
		<view class="allMargin">
			<form @submit="formSubmit">
				<input v-model="phoneNumber" type="text" class="input" placeholder="手机号" placeholder-class="placeholder-class" />
				<view class="passwordSection">
					<input :focus="setFocus" name="password" :password="isVisible?false:true" :class="isVisible?'':'blackPoint'" class="login-passwordInput"
					 placeholder="登录密码" placeholder-class="placeholder-class" />
					<image class="passwordEye" :src="isVisible?'/static/login/phoneLogin/visible.png':'/static/login/phoneLogin/invisible.png'"
					 @click="changeVisible"></image>
				</view>
				<button class="common-button" form-type="submit">登录</button>
				<view>
					<text id="quickRegister" @click="quickRegister()">快速注册</text>
					<text id="resetPassword" @click="resetPassword()">找回密码</text>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	var graceChecker = require("@/common/graceChecker.js"); //graceUI的表单验证
	import md5 from 'js-md5'
	import {
		setToken,
		getToken
	} from '@/common/utils/auth.js';
	import {getCorporationInfo} from '@/common/api/corporation/corporationActivity.js';
	import {
		verifyPhone,
		userLogin
	} from '@/common/api/quickRegister/quickRegister.js'
	export default {
		data() {
			return {
				isVisible: false,
				setFocus: false,
				phoneNumber: '',
				password: ''
			}
		},
		methods: {
			// 用户切换是否显示密码
			changeVisible() {
				if (this.isVisible) {
					this.isVisible = false
					this.setFocus = !this.setFocus
				} else {
					this.isVisible = true
					this.setFocus = !this.setFocus
				}
			},
			// 当返回不是200时报网络错误的错或者作出什么提示
			netError: function(title, icon) {
				uni.showToast({
					title: title,
					icon: icon,
					mask: true,
					duration: 1000
				})
			},
			formSubmit: function(e) {
				if (!(/^1[3456789]\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请输入有效的11位电话号码！',
						icon: 'none'
					})
				} else {
					this.info = e.target.value;
					this.password = this.info.password.trim();
					var regPassword = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,32}$/;
					var rule = [
						//验证密码格式：密码长度8-32位，须包含数字、字母、符号至少两种或以上元素。
						{
							name: "password",
							checkType: "reg",
							checkRule: regPassword,
							errorMsg: "密码格式错误！",
						}
					];
					var checkRes = graceChecker.check(this.info, rule);
					if (checkRes) {
						// 先判断手机号是否已经注册
						verifyPhone({
							phone: this.phoneNumber
						}).then(res => {
							if (res.data.code == 200) {
								if (res.data.data == false) {
									uni.showToast({
										title: "该手机号未注册"
									})
								} else {
									// 确认已经注册之后判断账号密码是否正确
									userLogin({
										phone: this.phoneNumber,
										password: md5(this.password)
									}).then(res => {
										if (res.data.code == 200) {
											console.log(res)
											this.netError("登录成功", 'success')
											setToken(res.data.data.tokenHead + ' ' + res.data.data.token);
											uni.setStorageSync('isAlreadyLogin', true);
											this.getCorporationInfo()
										} else {
											this.netError("账号或密码错误", 'none')
										}
									})
								}
							} else {
								this.netError("网络错误", 'none')
							}
						})


					} else {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
					}

				}
			},
			// 跳转到快速注册
			quickRegister: function() {
				uni.navigateTo({
					url: '/pagesA/pages/quickRegister/index'
				})
			},
			// 跳转到忘记密码
			resetPassword: function() {
				uni.navigateTo({
					url: '/pagesA/pages/forgetPassword/forgetPassword'
				})
			},
			// 获取该用户的社团信息
			getCorporationInfo:function() {
				let corporationInfo = {}
				getCorporationInfo().then(res => {
					if (res.data.code == 200) {
						corporationInfo = res.data.data
						uni.setStorageSync("corporationInfo",corporationInfo)
						uni.setStorageSync("clubId",res.data.data.id)
						console.log("获取社团信息" + uni.getStorageSync("clubId"))
						uni.reLaunch({
							url: '/pages/center/center'
						})
					} else {
						uni.showToast({
							title: "网络错误",
							icon: 'none'
						})
					}
				})
			}
		},
		onLoad(e) {
			console.log(e)
			this.phoneNumber = e.phoneNumber
		}
	}
</script>

<style>
	.passwordEye {
		height: 60rpx;
		background-color: #F2F2F2;
		padding: 15rpx 25rpx;
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
		flex: 1;
	}

	.blackPoint {
		font-size: 24rpx;
	}

	.placeholder-class {
		color: #cccccc;
		font-size: 28rpx;
	}

	#quickRegister {
		font-size: 32rpx;
		float: left;
	}

	#resetPassword {
		font-size: 32rpx;
		float: right;
	}

	/* 通用的input输入框的css */
	.input {
		height: 60rpx;
		background-color: #F2F2F2;
		margin: 70rpx auto 50rpx;
		padding: 15rpx 25rpx;
		text-align: left;
		font-size: 28rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
	}
</style>
